<template>
  <view class="popular">
    <image style="width: 100%;" src="https://img2.baidu.com/it/u=820750186,2276930444&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"  mode="widthFix"></image>
    <view class="popular-items">
        <PopularCar :showStatus="true" :item="item" :index="index" v-for="(item,index) in dataList" :key="item.id"/>
    </view>
    <NoData v-if="dataList.length < 1" />
  </view>
</template>

<script setup lang="ts">
import PopularCar from "@/components/PopularCar/PopularCar.vue";
import dyUserPlayingService from "@/api/dyUserPlayingService";
import type{ Leaderboard } from "@/api/model/dyUserCodeModel";
import NoData from "@/components/NoData/NoData.vue";
const dataList = ref<Array<Leaderboard>>([])

const getLeaderboard = async()=>{
   const {success,result} =  await dyUserPlayingService.getLeaderboard()
    let sortedValues  = []
    for (let key in result) {
        let value = result[key];
        let parsedValue = JSON.parse(value);
        
        // 在这里可以对每个 value 进行处理，例如输出内容
        sortedValues.push(parsedValue);
    }
    sortedValues.sort((a, b) => b.commission - a.commission);
    dataList.value = sortedValues
}

onLoad(()=>{
    getLeaderboard()
})

</script>

<style lang="scss" scoped>
.popular{
    .popular-items{
        padding: 28rpx;
        height: 100rpx;
        background: white;
        border-radius: 34rpx 34rpx 0 0 ;
        position: relative;
        z-index: 100;
        top: -80rpx;
    }

}


</style>
